<!--
 * @Author: 梁清福
 * @Date: 2021-07-12 16:47:31
 * @LastEditTime: 2021-07-13 17:12:50
 * @LastEditors: 梁清福
 * @Description: 游学详情
 * @FilePath: \lianxi\day2\xxtx-ui\detail.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行学天下-游学项目详情    </title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/details.css">
</head>
<body>
    <div id="details">
    <div class="header">
        <el-popover placement="top-start" title="提示" width="200" trigger="hover" content="点击此处,返回首页">
        <div slot="reference" class="headLeft" >  
            <div class="logo"  @click="toIndex()"> 行学天下 </div>
            <div class="title"  @click="toIndex()">行学天下</div>
        </div>
       </el-popover>
        <div class="headRight">
            <div class="callMe">
               <a href="#callMe"><img src="image/callMe.png" alt="图片丢失了">致电我们</a> 
            </div>
        </div>
    </div>

    <div class="main">
        <!-- 游学详情 -->
        <div class="title"> {{articleDetails.title}}</div>
        <div class="time" v-if="articleDetails.baseUser">{{ formatDate(articleDetails.publishTime)}}  作者:{{articleDetails.baseUser.realname}}</div>
            <div class="details" v-html="articleDetails.content"></div>
            <div class="toIndex" ><div class="myBtn" @click="toIndex()">
            <!-- 点击此处返回首页 -->
            <el-button plain type="primary" @click="toIndex()">点击此处返回首页</el-button>
            </div>
            </div>   
    </div>

     <!-- 底部 -->
     <div class="footer">

        <div id="callMe" class="callMe">
          联系我们（工作时间：9:00-17:00）
          121-02542542
          <a href="https://briup.cn">https://briup.cn</a>
            <!--通过qq实现在线客服功能-->
            <a target="_blank"href="http://wpa.qq.com/msgrd?v=3&uin=1439370928&Site=se6%9d%%b0%e6%99%ae&Menu=yes">在线客服</a>
        </div>

        <div class="beiAn">
          <a href="http://beian.miit.gov.cn">京ICP备XXXXXXX号</a>
          <a href="http://wwwwi.beian.gov.cn/portal/registerSystemInfo">公安备案号00000000</a>
        </div>
          <div class="callMe">
            ©1907-2021山西农业大学
        </div>
    </div>
         <!--返回顶部-->
         <el-backtop ></el-backtop>

</div>
 </body>
<script>
    new Vue({
        el:'#details',
        data:{
            articleDetails:[],
        },
        created(){
           var id=window.location.search.split('=')[1];
          
           axios.get('http://47.94.46.113:8888/index/article/findById?id=' + id).then((res)=>{this.articleDetails=res.data.data })},
            methods:{
                formatDate(date) {
        return moment(date).format('YYYY-MM-DD')
      },
      toIndex(){
          window.location.href='index.html'
      }
            }
    })
</script>
</html>